<template>
  <!-- eslint-disable -->
  <div class="articleDiv">
    <div class="leftMenu">
      <div>
        <div class="progName">栏目名</div>
        <div class="allContent" @click="getAllArticle">全部内容</div>
        <el-tree :data="treeData" :props="defaultProps" accordion @node-click="handleNodeClick" style="margin-bottom: 30px" />
      </div>
      <el-button type="primary" size="small" icon="el-icon-plus" class="addNewActicle" @click="handleAddArticle">新增文章</el-button>
    </div>
    <div class="rightList">
      <div class="topTitle">
        <span>院校分支标题</span>
        <el-input v-model="articleParams.s" style="width: 280px;" prefix-icon="el-icon-search" placeholder="请输入文章标题关键词搜索" clearable @keyup.enter.native="handleInputSearch" />
      </div>
      <!-- 列表 -->
      <el-table v-loading="loading" :data="programList" style="width: 100%">
        <el-table-column align="center" prop="title" width="200" label="文章标题">
          <template slot-scope="{row}">
            <div class="tableListTitle">{{ row.title }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="columns" label="所属栏目">
          <template slot-scope="{row}">
            <span>{{ row.column.title }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="thumbnail" label="缩略图">
          <template slot-scope="{row}">
            <img :src="row.thumbnail" class="columnImg" alt="">
          </template>
        </el-table-column>
        <el-table-column align="center" prop="is_show" label="状态">
          <template slot-scope="{row}">
            <span>{{ row.is_show === 1 ? '显示' : '隐藏' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="weight" label="显示顺序" />
        <el-table-column align="center" label="操作">
          <template slot-scope="{row}">
            <el-tooltip effect="dark" content="编辑" placement="top-start">
              <span class="btnIcon edit" @click="handleEditArticle(row)"></span>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除" placement="top-start">
              <span class="btnIcon delete" @click="handleDeleteArticle(row)"></span>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange" 
        :current-page.sync="articleParams.page" 
        :page-sizes="[10,20,30,50]" 
        :page-size="articleParams.limit" 
        layout="prev, pager, next, total, sizes, jumper"
        :total="total" 
        style="margin-top: 30px;"
      />
    </div>
  </div>
</template>

<script>
import { getColumnTrees, getArticlesLists, deleteArticle } from '../../api/informationNetwork'
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      treeData: [],
      articleParams: {
        s: '', // 搜索框内容
        column_id: '', // 栏目ID
        page: 1,
        limit: 10
      },
      loading: false,
      programList: [],
      total: null
    }
  },
  mounted() {
    this.getColumnTrees()
    this.getArticlesLists()
  },
  methods: {
    // 获取栏目树
    getColumnTrees() {
      getColumnTrees({ depth: 3 }).then(res => {
        this.treeData = res
      })
    },
    // 获取栏目列表
    getArticlesLists() {
      this.loading = true
      getArticlesLists(this.articleParams).then(res => {
        this.programList = res.data
        this.total = res.meta.total
      }).catch(() => {
      }).finally(() => {
        this.loading = false
      })
    },
    // 点击树状导航栏
    handleNodeClick(data) {
      this.articleParams.column_id = data.id
      this.getArticlesLists()
    },
    // 获取全部文章
    getAllArticle() {
      this.articleParams = {
        s: '',
        column_id: '',
        page: 1,
        limit: 10
      }
      this.getArticlesLists()
    },
    // 输入框搜索
    handleInputSearch() {
      this.getArticlesLists()
    },
    // 点击'删除'
    handleDeleteArticle(row) {
      this.$confirm('您是否确认删除本文章', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        deleteArticle(row.id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功！'
          })
          this.articleParams.page = Math.ceil((this.total - 1) / this.articleParams.limit)
          this.getArticlesLists()
          this.getColumnTrees()
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {
      })
    },
    // 新增文章
    handleAddArticle() {
      this.$router.push({ path: './article/add' })
    },
    handleEditArticle(row) {
      this.$router.push({
        path: './article/edit',
        query: {
          id: row.id
        }
      })
    },
    // 分页
    handleSizeChange(val) {
      this.articleParams.limit = val
      this.getArticlesLists()
    },
    handleCurrentChange(val) {
      this.articleParams.page = val
      this.getArticlesLists()
    }
  }
}
</script>

<style lang="scss">
  $defaultColor: #0A2045;
  .btnIcon {
    display: inline-block;
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin-right: 10px;
  }
  // 删除
  .delete {
    background: url('../../assets/btn/icon_delete.png') no-repeat center center;
  }
  .delete:hover {
    background: url('../../assets/btn/icon_delete_s.png') no-repeat center center;
  }
  // 查看
  .edit {
    background: url('../../assets/btn/icon_edit.png') no-repeat center center;
  }
  .edit:hover {
    background: url('../../assets/btn/icon_edit_s.png') no-repeat center center;
  }
  .el-button--primary {
    color: #FFF;
    background-color: #0C66FF;
    border-color: #0C66FF;
  }
  .el-button--small {
    border-radius: 8px;
  }
  .el-button--primary:hover {
    color: #fff;
    background-color: #0951CC;
    border-color: #0951CC;
  }

  .el-tree-node__content {
    color: $defaultColor;
  }

  .el-tree-node:focus>.el-tree-node__content {
    color: #0C66FF;
  }

  .el-table {
    color: $defaultColor;
    font-size: 14px;
    line-height: 19px;
    thead {
      color: $defaultColor;
      tr, th {
        background: #FAFAFB;
      }
    }
  }
  .articleDiv {
    width: 100%;
    display: flex;
    justify-content: flex-start;

    .leftMenu {
      width: 280px;
      padding: 25px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .progName {
        color: $defaultColor;
        font-size: 14px;
        font-weight: bold;
        line-height: 19px;
        margin-bottom: 37px;
      }
      .allContent {
        color: $defaultColor;
        font-size: 14px;
        line-height: 26px;
        padding-left: 26px;
        cursor: pointer;
      }
      .allContent:hover {
        color: #0C66FF;
        background: #FAFAFB;
      }
      .addNewActicle {
        width: 100%;
        font-size: 14px;
        line-height: 17px;
      }
    }

    .rightList {
      flex: 1;
      padding: 19px 25px 13px;
      border-left: 1px solid #ECECF2;

      .topTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 17px;

        span {
          color: $defaultColor;
          font-size: 14px;
          line-height: 19px;
          font-weight: bold;
        }
      }
      .tableListTitle {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        -webkit-box-orient: vertical;
      }
      .columnImg {
        width: 60px;
        height: 60px;
      }
    }

  }
</style>

